import { useState, useEffect } from 'react';
import { useComplianceStore } from '@/stores/useComplianceStore';
import Navigation from './work/Navigation';
import ComplianceView from './work/ComplianceView';
import RiskView from './work/RiskView';
import RemediationView from './work/RemediationView';
import { useBusiness } from '@/stores/useBusinessStore';

/**
 * Work页面主组件
 */
const Work = () => {
  const [activeView, setActiveView] = useState<'compliance' | 'risk' | 'remediation'>('compliance');
  const { fetchItems } = useComplianceStore();
  const { selectedBusiness } = useBusiness();

  // 初始化时加载数据
  useEffect(() => {
    if (!selectedBusiness) return;
    fetchItems(selectedBusiness?.id);
  }, [fetchItems, selectedBusiness]);
  
  return (
    <div className="py-4">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <Navigation activeView={activeView} onViewChange={setActiveView} />
        {activeView === 'compliance' ? <ComplianceView /> : 
         activeView === 'risk' ? <RiskView /> : <RemediationView />}
      </div>
    </div>
  );
};

export default Work;
